<template>
	<view class="mainpadding" v-if="pageShow">
		<view class="flexbetween">
			<view class="titletext bold hei_text">数据统计</view>
			<view class="flexright" @click="toptime">
				<view class="strongtext hei_text">{{end_time?start_time+"-"+end_time:"全部时间"}}</view>
				<u-icon name="arrow-down" color="#333" size="12"></u-icon>
			</view>
		</view>
		<view class="margin_top2 jfbox dingwei">
			<image src="../static/image/system/jifen.png" mode=""></image>
			<view class="neirong" >
				<view class="flexbetween">
					<view class="xiaobai ershiba fonweight">收入展示</view>
					<view class="xiaobai ershiba fonweight" @click="tixian">点击提现</view>
				</view>
				
				<view class="flexbetween" style="padding: 0 40rox;">
					<view class="margin_top4 flexcolumn bigtbtext">
						<view class="">￥{{dataAll.ss_price}}</view>
						<text class="sanshier xiaobai fonweight">实收金额</text>
					</view>
					<view class="margin_top4" style="height: 60rpx;width: 1rpx; background-color: #fff;opacity: .3;"></view>
					<view class="margin_top4 flexcolumn bigtbtext">
						<view class="">￥{{dataAll.sjreturn_price}}</view>
						<text class="sanshier xiaobai fonweight">退费金额</text>
					</view>
				</view>
			</view>
		</view>
		<view class="margin_top2 flexbetween">
			<view class="hdsl">
				<text class="sanshier xiaobai fonweight">活动数量</text>
				<view class="bigtbtext margin_top2">{{dataAll.activity_kcnum}}</view>
			</view>
			<view class="bssl">
				<text class="sanshier xiaobai fonweight">比赛数量</text>
				<view class="bigtbtext margin_top2">{{dataAll.ss_kcnum}}</view>
			</view>
		</view>
		<view class="flexbetween margin_top2">
			<view class="titletext bold hei_text">明细</view>
			<view class="flexright" @click="bottomtime">
				<view class="strongtext hei_text">{{searchtime?searchtime:"全部时间"}}</view>
				<u-icon name="arrow-down" color="#333" size="12"></u-icon>
			</view>
		</view>
		<!-- <u-tabs :current="tabsid-1" lineColor="#1ba95b" :scrollable="false" :list="tabList"
			@change="changeTab"></u-tabs> -->
		<!-- <view class="xiahuaxian margin_top" v-for="item in 3" @click="tzjlbxq">
			<view class="flexbetween">
				<view class="shilitu">
					<image src="../static/image/system/banner1.png" mode=""></image>
				</view>
				<view class="" style="width: 69%;">
					<view class="titletext xiaohei fonweight yhxk">XXX活动名称</view>
					<view class="strongtext xiaohui nofonweight margin_right2 margin_top2">数量：10</view>
					<view class="flexbetween margin_top2">
						<view class="strongtext xiaohui nofonweight margin_right2 ">08:00-10:00</view>
						<view class="strongtext xiaohong nofonweight margin_right2 ">+10312</view>
					</view>
				</view>
			</view>
			
		</view> -->
		<view class="xiahuaxian flexbetween margin_top" v-for="item in list.data" :key="item.id">
			<view class="">
				<view class=" ershil xiaohei nofonweight ">{{item.memo}}</view>
				<view class="margin_top1 strongtext xiaohui nofonweight ">{{item.createtime_text}}</view>
			</view>
			<view class=" sanshier xiaohei fonweight ">{{item.money}}</view>
		</view>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabsid: 1,
				tabList: [{
					name: '赛事',
					id: 1
				}, {
					name: '活动',
					id: 2
				}, ],
				messageTime: {
					timeShow: false,
					title: "选择日期",
					mode: "date" //date日期，datetime年月日时分秒，time时间
				},
				timeflag:0,//0顶部开始时间，1顶部结束时间
				start_time:"",
				end_time:"",
				start_time1:"",
				pageShow:false,
				dataAll:{},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				searchtime:"",
				user_zbfapply_listid:""
			}
		},
		onLoad(options) {
			this.user_zbfapply_listid=options.user_zbfapply_listid
			this.getDetail()
			this.init()
		},
		methods: {
			tixian(){
				uni.navigateTo({
					url:"/pages_mypage/tixian?type=2"
				})
			},
			bottomtime(){
				this.messageTime = {
					timeShow: true,
					title: "选择年月",
					mode: "year-month" //date日期，datetime年月日时分秒，time时间
				},
				this.timeflag = 2
			},
			toptime(){
				this.messageTime = {
					timeShow: true,
					title: "选择开始日期",
					mode: "date" //date日期，datetime年月日时分秒，time时间
				},
				this.timeflag = 0
			},
			getDetail(){
				httpRequest.request('/api/user/zbfapplyCw', 'GET', {
					start_time:this.start_time,
					end_time:this.end_time,
					user_zbfapply_id:this.user_zbfapply_listid
				}).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					searchtime:this.searchtime,
					user_zbfapply_id:this.user_zbfapply_listid
				}
				let url = '/api/user/userZbfapplyMoneyLog'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			timeConfirm(e) {
				if(this.timeflag==0){
					this.messageTime = {
						timeShow: true,
						title: "选择结束日期",
						mode: "date" //date日期，datetime年月日时分秒，time时间
					},
					this.timeflag = 1
					this.start_time1 = e
				}else if(this.timeflag==1){
					this.start_time = this.start_time1
					this.end_time = e
					this.getDetail()
				}else if(this.timeflag==2){
					this.searchtime = e
					this.init()
				}
			},
			// changeTab(e) {
			// 	this.tabsid = e.id
			// 	// this.init()
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.shilitu {
		width: 200rpx;
		height: 160rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.hdsl{
		width: 48%;
		background: linear-gradient(92deg, #1ba95b 0%, #36b36e 100%);
		height: 200rpx;
		border-radius: 20rpx;
		padding: 30rpx 50rpx;
		box-sizing: border-box;
	}
	.bssl{
		width: 48%;
		background: linear-gradient(92deg, #ffa238 0%, #ffad51 100%);
		height: 200rpx;
		border-radius: 20rpx;
		padding: 30rpx 50rpx;
		box-sizing: border-box;
	}
	.bigtbtext {
		font-size: 48rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}
.jfbox {
		width: 100%;
		height: 260rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.neirong {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		width: 90%;
	}
</style>
